export const initWaterFall = data => {
  if (data.length <= 0) {
    return
  }
  let waterfall = document.querySelector('.waterfall')
  function getMinTop(arr) {
    let min = arr[0],
      index = 0
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] < min) {
        min = arr[i]
        index = i
      }
    }
    return {
      min,
      index
    }
  }
  function getMaxTop(arr) {
    let max = arr[0],
      index = 0
    for (let i = 0; i < arr.length; i++) {
      if (arr[i] > max) {
        max = arr[i]
        index = i
      }
    }
    return {
      max,
      index
    }
  }
  function getInfo() {
    const width = window.innerWidth
    let gap = 32
    let column = 5
    if (width > 1424 && width < 1727) {
    } else if (width > 1192 && width < 1424) {
      column = 4
      gap = 24
    } else if (width > 728 && width < 1192) {
      column = 3
      gap = 24
    } else if (width < 728) {
      column = 2
      gap = 12
    }
    let imgWidth = (waterfall.offsetWidth - gap * (column - 1)) / column
    return {
      imgWidth,
      column,
      gap
    }
  }
  let { gap, imgWidth, column } = getInfo()
  let nextTop = new Array(column).fill(0)
  let itemList = document.querySelectorAll('.note-item')
  for (let i = 0; i < itemList.length; i++) {
    let { min, index } = getMinTop(nextTop)
    itemList[i].style.width = imgWidth + 'px'
    itemList[i].style.transform =
      `translate(${index * (gap + imgWidth)}px, ${min == 0 ? min : min + gap / 2}px)`
    if (data[i].coverUrl == null || data[i].coverUrl == '') {
      const noImg = itemList[i].getElementsByClassName('no-img')[0]
      nextTop[index] +=
        noImg.offsetHeight +
        itemList[i].getElementsByClassName('footer')[0].clientHeight +
        gap / 2
    } else {
      let { coverWidth, coverHeight } = data[i]
      nextTop[index] +=
        (coverHeight * imgWidth) / coverWidth +
        itemList[i].getElementsByClassName('footer')[0].clientHeight +
        gap / 2
    }
  }
  let { max } = getMaxTop(nextTop)
  waterfall.style.height = max + 'px'
}
